<template>
  <div class="page-outer">
    <div style="height: 71px; background-color: #fff; padding: 0 16px">
      <div class="title-text">
        <span>土桥xxxxxxxxxxxxxxxxxxxx项目</span>
      </div>
      <div>
        <span class="type-text type-text-1">
          <span>住宅用地</span>
        </span>
      </div>
    </div>

    <div style="padding: 8px; height: calc(100% - 89px); overflow-y: auto; overflow-x: hidden">
      <!-- TitleBar -->
      <TitleBar>项目地块基础指标</TitleBar>
      <!-- 地块基础 -->
      <div style="background-color: #fff; padding: 12px; display: flex; margin-bottom: 8px">
        <div style="padding: 12px">
          <img src="@/assets/page03/u373.png" style="width: 480px; height: 360px" />
        </div>
        <div style="padding: 12px">
          地块开发条件： 配建要求： 0016号地块含1处社区卫生服务站，建筑面积不低于550㎡。0017号地块含1处社区综合文化
          室，建筑面积约800㎡；1处末端营业网点，建筑面积约50㎡；1座10千伏开闭站，占地面积约300㎡；1座通信接入机房，建筑面积不少于80㎡；1座有线电视三级机房，建筑面积不少于50㎡；1
          处再生资源回收站，建筑面积约50㎡。 消防配建要求：
          1、HD00-1412-0016地块，该项目应配建人防工程建筑面积总计不小于5546.21㎡。其中：其中配建不少于4000㎡二等人员掩蔽场所，抗力等级不小于甲
          5
          级；其余面积可配建配套工程，抗力级别不小于甲6级。2、HD0014120017地块，该项目应配建人防工程建筑面积总计不小于6604.93
          ㎡。其中：其中配建不少于5000㎡二等人员掩蔽场所，抗力等级不小于甲5级。配建不少于1000㎡专业队队员掩蔽部，抗力等级不小于甲5级；其余面积可配建配套工程，抗力不小于甲6级。3、HD00-1412-0017地块西部应设置人防警报器（服务半径不大于500米），音响覆盖率100。
        </div>
      </div>

      <!-- TitleBar -->
      <TitleBar>地块四至</TitleBar>
      <!-- 地块四至 -->
      <div style="background-color: #fff; padding: 12px; margin-bottom: 8px">
        <div style="padding: 12px 12px 0; display: flex">
          <div style="margin-right: 24px">东至： 规划宝山东路</div>
          <div style="margin-right: 24px">西至： 规划宝山中路</div>
          <div style="margin-right: 24px">南至： 规划绿地</div>
          <div style="margin-right: 24px">北至： 规划宝山中一街</div>
        </div>

        <div style="display: flex">
          <div style="padding: 12px">
            <img src="@/assets/page03/u424.png" style="width: 240px; height: 180px" />
            <div style="padding: 12px 12px 0; text-align: center">项目南侧现状道路</div>
          </div>
          <div style="padding: 12px">
            <img src="@/assets/page03/u426.png" style="width: 240px; height: 180px" />
            <div style="padding: 12px 12px 0; text-align: center">项目东侧围墙</div>
          </div>
          <div style="padding: 12px">
            <img src="@/assets/page03/u428.png" style="width: 240px; height: 180px" />
            <div style="padding: 12px 12px 0; text-align: center">项目南侧围墙</div>
          </div>
          <div style="padding: 12px">
            <img src="@/assets/page03/u430.png" style="width: 240px; height: 180px" />
            <div style="padding: 12px 12px 0; text-align: center">项目内树木</div>
          </div>
        </div>
      </div>

      <!-- TitleBar -->
      <TitleBar>地块内情况</TitleBar>
      <!-- 地块内情况 -->
      <div style="background-color: #fff; padding: 12px; margin-bottom: 8px">
        <div style="padding: 12px 12px 0; display: flex">
          <div style="margin-right: 24px">土地平整情况：</div>
        </div>

        <div style="display: flex">
          <div style="padding: 12px">
            <img src="@/assets/page03/u440.png" style="width: 240px; height: 180px" />
            <div style="padding: 12px 12px 0; text-align: center">项目南侧现状道路</div>
          </div>
          <div style="padding: 12px">
            <img src="@/assets/page03/u441.png" style="width: 240px; height: 180px" />
            <div style="padding: 12px 12px 0; text-align: center">项目东侧围墙</div>
          </div>
          <div style="padding: 12px">
            <img src="@/assets/page03/u442.png" style="width: 240px; height: 180px" />
            <div style="padding: 12px 12px 0; text-align: center">项目南侧围墙</div>
          </div>
        </div>
      </div>
    </div>
    <!-- bbb -->
  </div>
</template>

<script setup>
import TitleBar from '@/components/TitleBar.vue';
</script>

<style scoped>
.page-outer {
  background-color: rgba(242, 242, 242, 1);
  width: 100%;
}

.title-text {
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  padding: 12px 0 0;
}

.type-text {
  font-size: 10px;
  padding: 4px 12px;
  margin-right: 4px;
}

.type-text-1 {
  color: #507df3;
  background-color: rgb(80, 125, 243, 0.3);
}
.type-text-2 {
  color: #f59a23;
  background-color: rgba(245, 154, 35, 0.3);
}
</style>

